@font-face
{
	font-family: TXWHZGBJT;
	src: url('../css/碳纤维汉真广标简体.ttf');
	     // url('Sansation_Light.eot'); /* IE9+ */
}
@font-face
{
	font-family: Storyboo;
	src: url('../css/Storyboo.woff.ttf');
	     // url('Sansation_Light.eot'); /* IE9+ */
}
.recharge_center{
	.nav{
		width: 935px;
		margin: 20px auto 15px auto;
		overflow: hidden;
		.kk_logo{
			float: left;
			img{
				width: 175px;
				height: 53px;
			}
		}
		nav{
			float: right;
			margin-top: 30px;
			a{
				overflow: hidden;
				display: inline-block;
				height: 21px;
				border-left: 1px solid #5443C9;
				color: #5443C9;
				padding: 0 15px;
				font-family: TXWHZGBJT;
				font-weight: normal;
				span{
					position: relative;
					display: inline-block;
					text-align: center;
					transition: transform 0.3s;
				}
				span::before{
					position: absolute;
					top: 100%;
					content: attr(data-hover);
					font-weight: bold;
					transform: translate3d(0,0,0);
				}
			}
			a:nth-child(6){
				border-right: 1px solid #5443C9;
			}
			a:hover{
				span{
					transform: translateY(-100%);
				}
			}
		}
	}
	.top{
		width: 1200px;
		margin: 0 auto;
		title{
			img{
				width: 1200px;
				height: 120px;
			}
		}
	}
	.recharge_process{
		width: 1200px;
		margin: 0 auto;
		.process_order_title{
			ul{
				overflow: hidden;
				margin-left: 190px;
				margin-bottom: 10px;
				margin-top: 40px;
				li{
					float: left;
					position: relative;
					margin-right: 40px;
					span{

					}
					span:nth-child(1){
						display: inline-block;
						width: 50px;
						height: 50px;
						border-radius: 50%;
						background-image: url('../img/recharge-center/rechange_center_process_btn_number_bg.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
						line-height: 50px;
						text-align: center;
						position: absolute;
						top: 5px;
						left: -25px;
						font-family: Storyboo;
						font-size: 28px;
						color: #523DCA;
					}
					span:nth-child(2){
						display: inline-block;
						width: 244px;
						height: 58px;
						background-image: url('../img/recharge-center/rechange_center_process_btn_bg.png');
						background-repeat: no-repeat;
						background-size: 100% 100%;
						line-height: 58px;
						text-align: center;
						font-family: TXWHZGBJT;
						font-size: 30px;
						letter-spacing: 2px;
						color: white;
					}
				}
				li:nth-child(1){
					margin-left: 25px;
					span:nth-child(2){
						background-image: url('../img/recharge-center/rechange_center_process_btn_active_bg.png');
						color: rgb(53, 27, 167);
					}
				}
			}
		}
		.process_order_list{
			width: 1200px;
			margin: 0 auto;
			position: relative;
			ul{
				margin-left: 250px;
				margin-top: 100px;
				li{
					position: relative;
					p{
						margin-top: 30px;
						span:nth-child(1){
							font-family: TXWHZGBJT;
							color: rgb(98, 98, 98);
							display: inline-block;
							width: 100px;
							font-size: 20px;
							letter-spacing: 2px;
							text-align: left;
						}
						input{
							width: 450px;
							border: none;
							font-size: 20px;
							color: rgb(207, 207, 207);
							font-weight: bold;
							text-align: right;
							// margin-left: 400px;
						}
					}
					p:nth-child(4){
						margin-top: 140px;
					}
					button{
						width: 138px;
						height: 46px;
						background-repeat: no-repeat;
						background-size: 100% 100%;
						border: none;
						color: white;
						font-size: 20px;
						font-family: TXWHZGBJT;
						border-radius: 5px;
						margin-top: 80px;
						cursor: pointer;
					}
					button.sure{
						background-image: url('../img/recharge-center/rechange_center_process_btn_bg.png');
						margin-left: 200px;
					}
					button.cancel{
						background-image: url('../img/recharge-center/rechange_center_cancel_bg.png');
						color: rgb(98, 98, 98);
						margin-left: 10px;
					}
					.choose_recharge_amount{
						position: absolute;
						top:90px;
						left: 110px;
						span{
							display: inline-block;
							width: 278px;
							height: 40px;
							background-image: url(../img/recharge-center/rechange_center_process_btn_bg.png);
							background-repeat: no-repeat;
							background-size: 100% 100%;
							margin-top: 10px;
							margin-left: 15px;
							font-family: TXWHZGBJT;
							line-height: 40px;
							color: white;
							text-align: center;
							letter-spacing: 2px;
							position: relative;
							cursor: pointer;
							img{
								width: 30px;
								position: absolute;
								top: 10px;
								left: 15px;
							}
						}
						span:nth-child(1){
							background-image: url(../img/recharge-center/rechange_center_process_btn_active_bg.png);
							color: rgb(53, 27, 167);
						}
					}
				}
				li:nth-child(2){
					.pay_method{
						float: left;
						margin-left: 80px;
						text-align: center;
						margin-bottom: 50px;
						p{
							width: 172px;
							height: 50px;
							background-image: url('../img/recharge-center/rechange_center_process_btn_bg.png');
							background-repeat: no-repeat;
							background-size: 100% 100%;
							border-radius: 5px;
							font-family: TXWHZGBJT;
							color: white;
							font-size: 20px;
							line-height: 50px;
							letter-spacing: 2px;
						}
					}
					.pay_method:nth-child(1){
						margin-left: 0;
						p{
							background-image: url(../img/recharge-center/rechange_center_process_btn_active_bg.png);
							color: rgb(53, 27, 167);
						}
					}
				}
				li:nth-child(3){
					margin-left: 75px;
					p{
						span{
							color: rgb(53, 27, 167);
						}
					}
					p:nth-child(4){
						margin-top: 30px;
					}
				}
			}
		}
	}
}